<script setup lang="ts">
import { RouterView, useRouter } from 'vue-router'
import { FolderOpened, Service } from '@element-plus/icons-vue'
const router = useRouter()
function paperManage(){
  router.push("/paper")
}
function questionSet(){
  router.push("/question")
}
</script>

<template>
  <el-container class="layout-one">
    <el-header>
      <div class="header-container">
        <img class="header-img" src="../assets/ncepu.jpg" alt="NCEPU-LOGO">
        <span class="header-span">智能教培系统</span> 
      </div> 
    </el-header>
    <el-container class="layout-two">
      <el-aside width="200px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#333744"
          text-color="#fff"
        >
          <el-menu-item index="1">
            <el-icon><FolderOpened /></el-icon>
            <span @click="paperManage">试卷管理</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><Service /></el-icon>
            <span @click="questionSet">智能出题</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped lang="less">
.layout-one {
  height: 100%;
  .el-header {
    background-color: #FFFFFF; 
    padding-left: 0px; 
    color: #000000;
    font-size: 20px;
    .header-container {
      display: flex;
      flex-direction: row;
      height: 100%;
      .header-img {
        height: 100%;
      }
      .header-span {
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
  .layout-two {
    .el-aside {
      background-color: #333744;
      .el-menu {
        border-right: 0;
      }
    }
    .el-main {
      background-color: #EAEDF1;
    }
  }

}
</style>

